
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<title>View Courses</title>
</h:head>

<f:view>
	<body>
		<ui:composition template="../includes/template.xhtml">
			<ui:define name="mainbody">
				<p:panel id="panel" header="View Courses" style="min-height: 550px"
					styleClass="prime_panel">
					<h:form id="form">

						<p:growl id="growl" showDetail="true" sticky="false"
							autoUpdate="true" showSummary="false" />

						<p:dataTable var="course" value="#{viewCoursesBean.courses}"
							rowKey="#{course.courseId}" rows="10"
							paginator="true" paginatorPosition="bottom"
							selection="#{viewCoursesBean.selectedCourse}"
							selectionMode="single"	id="coursesTable">

							<p:ajax event="rowSelect" update=":form:display"
								oncomplete="courseDialog.show()" />

							<f:facet name="header">  
					            List of Courses  
					        </f:facet>
					        
					        <p:column headerText="Course Code" sortBy="#{course.courseCode}"
								filterBy="#{course.courseCode}" id="code">  
					            #{course.courseCode}  
					        </p:column>

							<p:column headerText="Course Name" sortBy="#{course.title}"
								filterBy="#{course.title}" id="name">  
					            #{course.title}  
					        </p:column>
					        
					        <p:column headerText="Short Name" sortBy="#{course.shortName}"
								filterBy="#{course.shortName}" id="sname">  
					            #{course.shortName}  
					        </p:column>
						</p:dataTable>

						<p:dialog header="Course Detail" widgetVar="courseDialog"
							resizable="false" width="350" height="200"
							showEffect="fade" hideEffect="explode">

							<h:panelGrid id="display" columns="2" cellpadding="4">

								<h:outputText value="Name:" />
								<h:outputText value="#{viewCoursesBean.selectedCourse.title}" id="name" />
								
								<h:outputText value="Code:" />
								<h:outputText value="#{viewCoursesBean.selectedCourse.courseCode}" id="code" />
								
								<h:outputText value="Hours per Week:" />
								<h:outputText value="#{viewCoursesBean.selectedCourse.hoursPerWeek}" id="hps" />
								
								<h:outputText value="Class Duration:" />
								<h:outputText value="#{viewCoursesBean.selectedCourse.classInterval} " id="duration" />
								
								<h:outputText value="Status:" />
								<h:outputText rendered="#{viewCoursesBean.selectedCourse.currentStatus eq true}" value="Offered" id="offered" />
								<h:outputText rendered="#{viewCoursesBean.selectedCourse.currentStatus eq false}" value="Not Offered" id="noffered" />																								
							
							</h:panelGrid>
						</p:dialog>
					</h:form>
				</p:panel>
			</ui:define>
		</ui:composition>
	</body>
</f:view>
</html>